<script lang="ts">
// import { ElementNode } from "@vue/compiler-core";
import { defineComponent, ref, reactive, createApp } from "vue";
import AddSvg from "../components/svgs.vue";

export default defineComponent({
  name: "SvgVue",
  components: { AddSvg },
  setup() {
    let svgId = ref();
    const TransLate = reactive({ x: 0, y: 0 });
    let InitXY = reactive({ x: 0, y: 0 });
    let moves = ref(false); // 是否开启移动
    const svgPath: Array<string> = [
      "svg",
      "path",
      "circle",
      "line",
      "polyline",
    ];
    const selete = (e): void => {
      console.log(e, e.target);
      if (svgPath.includes(e.target.nodeName))
        console.log(e.target.attributes.d);
      e.target.setAttribute("stroke", "#2f8");

      e.target.style.border = "1px solid #ee5";
    };
    const move = (e) => {
      // console.log(e.clientX, e.clientY);
      let elex = e.clientX,
        eley = e.clientY;

      if (moves.value) {
        e.target.setAttribute(
          "transform",
          `translate(${TransLate.x},${TransLate.y})`
        );
      }
    };
    const mosdown = (e): void => {
      console.log(222);

      document.getElementById("svg").appendChild(AddSvg);
      console.log(AddSvg);

      if (e.target.attributes.transform) {
        console.dir(e.target.attributes.transform.nodeValue.slice(10, 19));
        console.log(e.target.attributes.transform.nodeValue.substring(9));
        let aa = e.target.attributes.transform.nodeValue
          .substring(9)
          .match(/[\(-\)]/);
        console.log(aa);

        InitXY = { x: e.clientX, y: e.clientY };
      } else {
        InitXY = { x: e.clientX, y: e.clientY };
      }

      moves.value = true;
    };
    const mosup = (e): void => {
      console.log("鼠标按键弹起", e);
      moves.value = false;
    };

    return {
      svgId,
      TransLate,
      InitXY,
      moves,
      svgPath,
      selete,
      move,
      mosdown,
      mosup,
    };
  },
});

// let svg2 = ref();
</script>

<template>
  <!-- @click="selete($event)" -->
  <svg
    id="svg"
    width="100%"
    height="80vh"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    @mousedown="mosdown"
    @mouseup="mosup"
    @mousemove="move"
  >
    <!-- <addSvg /> -->
    <!-- <path
      ref="svgId"
      d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
      stroke="#18a"
      fill="transparent"
    />
    <path
      d="m100 80 c 40 10, 65 10, 95 80 s 150 150, 180 80"
      stroke="#18a"
      fill="transparent"
    />

    <circle
      transform="translate(600,300)"
      r="40"
      fill="#17e"
      stroke="#178"
      stroke-width="3"
    ></circle>

    <ellipse
      cx="400"
      cy="180"
      rx="100"
      ry="50"
      style="fill: #eee; stroke: purple; stroke-width: 2; opacity: 0.35"
    />

    <line
      x1="400"
      y1="0"
      x2="200"
      y2="200"
      style="stroke: rgb(255, 0, 0); stroke-width: 2"
    />
    <rect x="10" y="10" width="190" height="200" stroke="black" fill="none">
      <animate
        attributeName="width"
        attributeType="XML"
        from="200"
        to="20"
        begin="1s"
        dur="5s"
        repeatCount="3"
        calcMode="linear"
        fill="freeze"
      ></animate>
    </rect> -->

    <rect x="10" y="10" width="200" height="25" stroke="black" fill="none">
      <animate
        id="c1"
        attributeName="width"
        attributeType="XML"
        from="200"
        to="20"
        begin="0s"
        dur="5s"
        repeatCount="3"
        fill="freeze"
      ></animate>
    </rect>
    <circle cx="120" cy="60" r="10" stroke="black" fill="none">
      <animate
        attributeName="r"
        attributeType="XML"
        begin="c1.end+2s"
        from="10"
        to="80"
        repeatCount="3"
        dur="4s"
      ></animate>
    </circle>

    <g transform="translate(500,300)">
      <rect
        x="-10"
        y="-10"
        width="20"
        height="20"
        style="fill: #8f9; stroke: black"
      >
        <animateTransform
          attributeType="XML"
          attributeName="transform"
          type="scale"
          from="1"
          to="4 2"
          begin="0s"
          dur="3s"
          fill="freeze"
        ></animateTransform>
      </rect>
    </g>

    <rect
      transform="translate(100,300)"
      x="-10"
      y="-10"
      width="20"
      height="20"
      style="fill: #f79; stroke: black"
    >
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        type="scale"
        from="1"
        to="4 2"
        dur="3s"
        begin="0s"
        fill="freeze"
        additive="sum"
      ></animateTransform>
      <animateTransform
        attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0"
        to="90"
        dur="3s"
        begin="3s"
        fill="freeze"
        additive="sum"
      ></animateTransform>
    </rect>

    <rect
      transform="translate(300,300)"
      x="-10"
      y="-10"
      width="20"
      height="20"
      style="fill: #ff9; stroke: black"
    >
      <animateMotion
        path="M50,135C100,25 150,225 200,125"
        dur="6s"
        fill="freeze"
      ></animateMotion>
    </rect>

    <path transform="translate(500,10)" d="M150 0 L75 200 L225 200 Z" />
    <path
      transform="translate(700,10)"
      d="M10 80 C 30 10, 65 10, 95 80 S 150 150, 180 80"
      stroke="#18a"
      fill="transparent"
    />
  </svg>
</template>

<style lang="less" scoped>
#svg {
  color: aqua;
}
</style>
